<template>
  <div class="home">
    <section class="hero">
      <h1> Precision AI Diagnostics, Empowering Medical Innovation</h1>
      <p>Leveraging AI technology for early detection of brain hemorrhage and colon polyps, enhancing diagnostic
        efficiency and accuracy.</p>
    </section>

  </div>
</template>

<script setup>
import { ref } from "vue";

</script>

<style lang="less" scoped>
.home {
  .hero {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 878px;
    background: url('../assets/banner1.png');
    background-position: top left;
    background-size: cover;
    gap: 45px;

    h1 {
      max-width: 1169px;
      text-align: center;
      color: #FFFFFF;
      font-family: PingFangSC, PingFang SC;
      font-size: 60px;
      font-weight: 500;
    }

    p {
      max-width: 1169px;
      text-align: center;
      color: #fdfefe;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      font-family: PingFangSC, PingFang SC;
      font-size: 32px;
      font-weight: 300;
    }
  }
}
</style>